import React, { useState } from 'react';
import { Rate, Input } from 'antd-mobile';
// 若用自定义图标，导入正确的 StarOutlined（非 StarOutline）
import { StarFilled, StarOutlined } from '@ant-design/icons';

const Evaluation = ({ service }) => {
  const [rating, setRating] = useState(3);
  const [comment, setComment] = useState('');

  // 关键：如果 service 未传递/为 undefined，显示“加载中”或提示
  if (!service) {
    return <div style={{ padding: '16px', textAlign: 'center' }}>加载中...</div>;
  }

  return (
    <div style={{ padding: '16px' }}>
      {/* 此时 service 一定存在，可安全访问属性 */}
      <div style={{ marginBottom: '16px' }}>
        <h4>评价 {service.name}</h4>
        <img 
          src={service.img} 
          alt={service.name} 
          style={{ 
            width: '100px', 
            height: '100px', 
            objectFit: 'cover', 
            marginTop: '8px',
            borderRadius: '8px' 
          }} 
        />
      </div>

      {/* 星级评分（用默认图标或自定义图标均可） */}
      <div style={{ marginBottom: '16px', display: 'flex', alignItems: 'center' }}>
        <span style={{ marginRight: '8px' }}>评分：</span>
        <Rate 
          value={rating} 
          onChange={(value) => setRating(value)} 
          count={5} 
          character={({ filled }) => filled ? <StarFilled /> : <StarOutlined />} 
        />
      </div>

      {/* 评价内容输入 */}
      <div style={{ marginBottom: '24px' }}>
        <span style={{ display: 'block', marginBottom: '8px' }}>评价内容：</span>
        <Input 
          value={comment} 
          onChange={({ value }) => setComment(value)} 
          placeholder="请分享您的服务体验..." 
          rows={4} 
          type="textarea" 
          style={{ width: '100%' }}
        />
      </div>

      {/* 提交按钮（可根据需求绑定提交逻辑） */}
      <button 
        style={{ 
          width: '100%', 
          padding: '12px', 
          backgroundColor: '#1677FF', 
          color: 'white', 
          border: 'none', 
          borderRadius: '8px',
          cursor: 'pointer'
        }}
        onClick={() => {
          if (!comment.trim()) {
            alert('请输入评价内容');
            return;
          }
          // 这里可添加提交评价到后端的逻辑（如调用接口）
          alert(`评价提交成功！\n评分：${rating}星\n内容：${comment}`);
        }}
      >
        提交评价
      </button>
    </div>
  );
};

export default Evaluation;